<!--
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-11-29 10:57:44
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2023-11-30 21:44:09
 * @FilePath: \partal\src\views\design\style\index.vue
 * @Description: 设计指南-样式指南
-->
<script lang="ts" setup>
  import { useRouter } from 'vue-router'
  import { designPng } from '@/enum/imageEnum'
  import { PAGE_DESIGN_STYLE_COLOR } from '@/enum/pageEnum';
  
  const router = useRouter()
  
  /**
   * 路由跳转：设计指南-样式指南-颜色
   */
  const goDesignStyleColor = () => router.push({ path: PAGE_DESIGN_STYLE_COLOR })
</script>

<template>
  <div class="index">
    <p class="p14">SSC+ Design</p>
    <p class="p36 mt18">样式指南</p>
    <p class="p14 mt12">从形色质构字全方面深入页面细节。</p>
    <p class="split mt38" />
    <div class="content-item">
      <p class="content-item-title">色彩</p>
      <p class="content-item-desc">色彩对产品的视觉传达和多维度信息的承载有着很重要的影响，好的产品在色彩配置上应当清晰，准确的传达有效信息和品牌感。按照颜色类型和功能的不同，SSC+ 将色彩分为主色、中性色、功能色和遮罩色。</p>
    </div>
    <div class="content-item">
      <p class="content-item-title">主色</p>
      <p class="content-item-desc">主色是一个产品的代表颜色，一般与品牌色相关联。常用于主要按钮和文字、重点操作状态、高亮提醒、空状态等。SSC+ 的默认主色为#1677FF，同时根据使用场景的不同，基于主色衍生出了点击态、悬浮态等不同状态下的颜色。</p>
      <img class="content-item-img" :src="designPng.style.theme" />
      <p class="content-item-desc">为尽可能贴合更多不同产品的色彩需求，SSC+ 提供了13种通用主色，并基于主色，通过动态梯度色彩算法衍生出<span class="blue" @click="goDesignStyleColor()">13套基础色板</span>。同时，我们也支持用户使用色彩配置工具配置适合自己产品的色板。</p>
    </div>
    <div class="content-item">
      <p class="content-item-title">中性色</p>
      <p class="content-item-desc">中性色又称为无彩色系，能在产品界面中调和色彩搭配，衬托主色及其他色彩，同时有利于拉开内容层次，使用户更专注于内容。常用于文字、背景、图标、边框和分割线等元素。SSC+ 根据过往业务经验，提供了适合线条、填充和文字的中性色参考色。</p>
      <img class="content-item-img" :src="designPng.style.neutral" />
    </div>
    <div class="content-item">
      <p class="content-item-title">功能色</p>
      <p class="content-item-desc">功能色的主要作用是向用户明确的传达成功、警告、错误、链接等信息和状态。SSC+基于用户对色彩的通用认知，提供了适合不同状态的功能色及其配套色。</p>
      <img class="content-item-img" :src="designPng.style.function" />
    </div>
    <div class="content-item">
      <p class="content-item-title">遮罩色</p>
      <p class="content-item-desc">遮罩色常用于作为底色突出模态窗口，一般以黑色、白色为基色，配合透明度百分比使用。SSC+默认的遮罩色为#000000，透明度为45%。</p>
      <img class="content-item-img" :src="designPng.style.shade" />
    </div>
    <div class="content-item">
      <p class="content-item-title">文字</p>
      <p class="content-item-desc">文字是重要的信息传达元素之一，它本身的视觉特性和品质影响着信息传递的质量和产品操作的效率。根据过往的产品设计经验，SSC+ 提供了通用的字体、字重、行高、段间距建议。</p>
    </div>
    <div class="content-item">
      <p class="content-item-title">字体</p>
      <p class="content-item-desc">SSC+ 的优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。</p>
      <div class="content-item-code">
        @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
        <br/>
        'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        <br/>
        'Noto Color Emoji';
      </div>
      <p class="content-item-desc">另外，在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体。</p>
    </div>
    <div class="content-item">
      <p class="content-item-title">字号与行高</p>
      <p class="content-item-desc">文字的大小，层级，对比度等都是影响视觉可读性和阅读效率的重要因素，为保障文本的易读性，界面文字需满足以下要求：</p>
      <p class="content-item-desc text-indent-2">最小可识别文字尺寸：12px</p>
      <p class="content-item-desc text-indent-2">字体层级：区分文本主副层级，字号差距需保持2-4px</p>
      <p class="content-item-desc text-indent-2">一个产品中不要有过多的字体层级，建议选择在 3-5 种之间，对于需要用户关注的文本信息可通过增加字重的方式突出</p>
      <p class="content-item-desc">考虑SSC+ 的通用性和包容性，在字号的选择上，我们将主字号定义为14px，并提供了不同层级的字号以适配不同信息层级的展示需求。</p>
      <p class="content-item-desc">目前通用的建议中，SSC+ 的行高=字号+8。</p>
      <img class="content-item-img" :src="designPng.style.fontSize" />
    </div>
    <div class="content-item">
      <p class="content-item-title">字重</p>
      <p class="content-item-desc">同一个字体的不同字重能传达不同的信息权重和情绪。细的字体给人以细腻、轻快的感觉，而粗体则给人着重和严肃的认知。因此适合的场景使用合适的字重非常重要。多数情况下，采用 Regular 以及 Medium 的两种字体重量，分别对应代码中的 400 和 500。在英文或数字字体加粗的情况下会采用 semibold 的字体重量，对应代码中的 600。在部分特殊场景中会采用Light的字体重量，对应代码中的300。</p>
      <img class="content-item-img" :src="designPng.style.fontWeight" />
    </div>
    <div class="content-item">
      <p class="content-item-title">阴影</p>
      <p class="content-item-desc">在界面中，我们常用阴影来模拟元素之间的物理层级关系。清晰自然的阴影能帮助用户快速理解界面中元素的空间关系，更清楚的理解整理界面内容。</p>
      <p class="content-item-desc">不同的阴影高度可以代表不同的元素层级，SSC+ 定义了四层基础的阴影高度，以适配页面中常用的元素层级。低层级元素（例如卡片等）的默认阴影可使用一级阴影，hover态等常规交互操作可以使用二级阴影，需要进行突出展示以及表示在空间上最上层的元素（例如下拉菜单、模态框等）可以使用三级和四级阴影。</p>
      <img class="content-item-img" :src="designPng.style.shadow" />
    </div>
  </div>
</template>

<style type="less" scoped>
  .index {
    width: 988px;
    margin: auto;
    padding: 36px 0 120px;
  }
  
  .content-item {
    margin-top: 48px;
    > .content-item-title {
      margin-top: 16px;
      font-size: 20px;
      color: #1D2129;
      line-height: 30px;
    }
    > .content-item-desc {
      margin-top: 16px;
      font-size: 14px;
      color: #4E5969;
      line-height: 22px;
      >.blue {
        color: #1677FF;
        cursor: pointer;
      }
      &.text-indent-2 {
        text-indent: 2em;
      }
    }
    >.content-item-img {
      margin-top: 16px;
      display: block;
      width: 100%;
      height: auto;
    }
    >.content-item-code {
      margin-top: 16px;
      padding: 25px;
      background: #f2f3f5;
      border-radius: 3px;
      font-size: 12px;
      color: #4E5969;
      line-height: 24px;
    }
  }
</style>
